<template>
	<login-register>
		<el-form class="register_form" ref="formData" :rules="formRules" :model="formData">
			<el-form-item label="登录账号" prop="account">
				<el-input placeholder="请输入工号/学号" v-model="formData.account">
					<i slot="suffix" class="el-input__icon el-icon-loading" v-if="loading"></i>
				</el-input>
			</el-form-item>
			<el-form-item label="用户名称" prop="userName">
				<el-input placeholder="请输入用户名称" v-model="formData.userName"></el-input>
			</el-form-item>
			<el-form-item label="用户密码" prop="password">
				<el-input placeholder="请输入用户密码" v-model="formData.password" show-password></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input placeholder="请输入确认密码" v-model="formData.confirmPassword" show-password></el-input>
			</el-form-item>
			<el-form-item label-width="0" class="button">
				<el-button type="primary" @click="handleSubmitRegister" :loading="btnLoading">立即注册</el-button>
			</el-form-item>
			<el-form-item label-width="0" class="link">
				<span>已有账号，马上</span>
				<router-link to="/login" replace>登录</router-link>
				<router-link class="index" to="/front" replace>网站首页</router-link>
			</el-form-item>
		</el-form>
	</login-register>
</template>

<script>
import { mapActions } from 'vuex';
import loginRegister from './common/loginRegister';
import { register, vailUserName } from '@/api/loginRegister';
export default {
	components: { loginRegister },
	consts: ['OPEN_DEPT_ID'],
	data() {
		const validUserAccount = (rule, value, callback) => {
			try {
				if (!value) {
					callback(new Error('请输入用户账号'));
				} else {
					this.loading = true;
					vailUserName({ account: value }).then((res) => {
						let result = res.data;
						this.loading = false;
						if (result.code === '0') {
							if (result.msg === '1') {
								callback(new Error('用户账号已存在'));
							} else {
								callback();
							}
						} else {
							callback(new Error('用户账号验证失败，请重新验证'));
						}
					});
				}
			} catch (error) {
				callback(error);
			}
		};
		const validConfirmPass = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入确认密码'));
			} else if (value !== this.formData.password) {
				callback(new Error('确认密码输入与用户密码不一致'));
			} else {
				callback();
			}
		};
		return {
			loading: false,
			formData: {},
			formRules: {
				account: [{ required: true, validator: validUserAccount, trigger: 'blur' }],
				password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
				confirmPassword: [{ required: true, validator: validConfirmPass, trigger: 'blur' }]
			},
			btnLoading: false
		};
	},
	methods: {
		//提交注册
		handleSubmitRegister() {
			this.$refs['formData'].validate((valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				this.registerRequest(this.formData).then((res) => {
					this.$message.success('注册成功');
					this.$router.replace('/login');
				});
			});
		},

		formatRegisterParams() {
			return new Promise((resolve, reject) => {
				let params = { ...this.formData };
				params.deptId = this.dictData['OPEN_DEPT_ID'];
				resolve(params);
			});
		},

		//登录请求
		registerRequest(data) {
			return new Promise(async (resolve, reject) => {
				let params = await this.formatRegisterParams();
				let result = await register(params).then((res) => res.data);
				this.btnLoading = false;
				if (result.code === '0') {
					let datas = this.$detailData(result.data);
					resolve(datas);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.register_form {
}
</style>
